<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	 <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css" />    <!--引用bootstrap的css样式文件-->
  <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap-theme.min.css" />    <!--引用CSS样式文件-->
  <script src="/static/jquery-2.1.1.min.js"></script>    <!--bootstrap是依赖jquery的，所以需要先引入这个-->
  <script src="/static/bootstrap/js/bootstrap.js"></script>   <!--引用bootstrap自己的js文件-->
</head>
<body>

	<div></div>

	<div></div>

	<!-- 登录 -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">登录</button>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">登录</h4>
				</div>
				<div class="modal-body">

					{% if errMessage %}
						<H4>{{ errMessage }}</H4>
						<br />
					{% endif %}

					<form id="loginForm" action="/index/" method="POST" class="form-horizontal">
						{% csrf_token %}
						<div class="form-group">
							<label for="inputUser3" class="col-sm-2 control-label">Username</label>
							<div class="col-sm-10">
								{{ loginObj.username }}
							</div>
						</div>
						{% if loginObj.errors.username %}
							<h5>{{ loginObj.errors.username.0 }}</h5>
						{% endif %}
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
							<div class="col-sm-10">
								{{ loginObj.password }}
							</div>
						</div>
						{% if loginObj.errors.password %}
							<h5>{{ loginObj.errors.password.0 }}</h5>
						{% endif %}


						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<input class=" form-control " style="width:100px;float:left" type="text" name="checkCode"/>
								<img  src="/checkcode/" onclick="changeCode(this);"/>
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<div class="checkbox">
									<label>
										<input type="checkbox"> Remember me
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default" >Sign in</button>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<!--<button id='login-submit' type="button" class="btn btn-primary">Sing In</button>-->
					<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>

				</div>
			</div>
		</div>
	</div>

	<!-- 注册 -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">注册</button>
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</div>
					<div class="form-group">
						<label for="exampleInputFile">File input</label>
						<input type="file" id="exampleInputFile">
						<p class="help-block">Example block-level help text here.</p>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox"> Check me out
						</label>
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
		</div>
	</div>


	<script src="/static/jquery.cookie.js"></script>
	<script>
		//模态框隐藏显示方法
		{% if loginObj.errors or errMessage%}
			//$('#myModal').addClass('in').show()
			$('#myModal').modal({show: true});
		{% endif %}

		//验证码图片更换事件
		function changeCode(ths) {
			ths.src = ths.src + '?';
		}

	</script>

</body>
</html>